<template>
	<view class="page">
	<view class="content">
		<image class="bgimage" src="/static/home/userbg.png"></image>
		<view class="contentbox">
			<view class="box">
				
			
			<view class="box_1">
				<view class="avatar">
					<image src="/static/home/dlh.png" class="avatar_img" mode=""></image>
				</view>
				<view class="username">
					用户名
				</view>
			</view>
			<view class="box_2">
				<text>已经累计签到 {{signNumber}} 天</text>
				<text>我的积分<text style="margin-left: 10rpx;">{{jfNumber}}</text> ></text>
			</view>
			<view class="box_3">
				<view class="cbox1">
					<text>功德值10/100</text>
					<piaoyiProgressBar :progress="10" backgroundColor="#f9d277" progressBackgroundColor="#e2ac21" :showText="false"
					    textColor="#fff" :textSize="24" :height="10"></piaoyiProgressBar>
				</view>
				<view class="cbox2">
					<view class="ccbox1">
						<view>你已累计修行 <text>{{xxday}}</text> 天</view>
					</view>
					
					<view class="ccbox2">
							<view class="qdbox">
								<view class="imgbg activeed" v-for="index in nowsiginNumber">
									<image src="/static/home/lhed.png" class="in_img" mode=""></image>
									<view class="title_img">
										第{{index}}天
									</view>
								</view>
								<view class="imgbg noactive" v-for="index in (7-nowsiginNumber)">
									<image src="/static/home/lhno.png" class="in_img" mode=""></image>
									<view class="title_img">
										第{{index+nowsiginNumber}}天
									</view>
								</view>
							</view>
							
							<view class="hx">
								
							</view>
					</view>
					<view class="ccbox3">
						<text @click="getmerits">获取功德</text>
					</view>
				</view>
				<view class="cbox3">
					<view class="navbox" v-for="item in navlist">
					<!-- <view class="navbox" v-for="item in navlist" @click="topath(item)"> -->
						<view class="navboxleftbox" >
							<view class="navboxleft">
								<image :src="item.imgurl"></image>
							</view>
							<view class="navboxlable">
								{{item.lable}}
							</view>
						</view>
						<view class="navboxrightbox">
							<uni-icons type="right" size="20" color="#b97232"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>

	<view class="content4">
		<text class="bottom_text">中国•西安•大重阳万寿宫 V 1.1.1版</text>
			<image :src="`${store.state.baseImgUrl}static/main/bottom_docimg.png`" class="border_bottom"></image>
	</view>
	<view class="pop-up">
		<uni-popup ref="popup" type="center" :custom="true">
		  <view class="popup-content">
				<view class="pop-title">
					功德值的获取
				</view>
				<view class="popup-bottom" v-for="(item, index) in gdGetList">
					<text class="up-title" >{{item.title}}</text>
					<view class="up-content" v-for="per in item.content" >
						{{per.text}}
					</view>
				</view>
			</view>
			<view class="popup-close" @click="closePop"></view>
		</uni-popup>
	</view>
	 
	</view>
</template>

<script setup>
	import {
		ref,reactive
	} from 'vue';
	import {useStore} from 'vuex'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import piaoyiProgressBar from '@/uni_modules/piaoyi-progress-bar/components/piaoyi-progress-bar/piaoyi-progress-bar.vue';
 
	const store = useStore() 
	const navlist=ref([
		{
			lable:"个人中心",
			url:"/",
			imgurl:"/static/home/people.png"
		},
		{
			lable:"我的点赞",
			url:"/",
			imgurl:"/static/home/zan.png"
		},
		{
			lable:"功德记录",
			url:"/",
			imgurl:"/static/home/dlh.png"
		},
		{
			lable:"我的消息",
			url:"/",
			imgurl:"/static/home/message.png"
		},
		{
			lable:"意见反馈",
			url:"/",
			imgurl:"/static/home/edit.png"
		}
	])
	const signNumber=ref(1)
	const xxday=ref(1)
	const jfNumber=ref(1)
	const nowsiginNumber=ref(3)
	const popup = ref(null);
	const getmerits=()=>{
		console.log(11111)
		popup.value.open();
	}
	
	// 功德值的获取弹窗
	const gdGetList = ref([
		{
			title: '重阳宫知新事',
			content: [
				{text: '阅读资讯，功德值+2，每日上限6'}
			]
		},
		{
			title: '点赞/分享',
			content: [
				{text: '点赞一次，功德值+1，每日上限5'},
				{text: '分享一次，功德值+2，每日上限10'}
			]
		}
	])
	
	const closePop = () => {
		popup.value.close()
	}


	const topath=(item)=>{
		uni.navigateTo({
			url: item.url
		});
	}
	
	onShow(() => {
		 
	})
	
</script>

<style scoped lang="less">
	.page {
		height:calc(100vh - 50px);
		background: #5e0e03;
		position: relative;
		// padding-bottom: 100rpx;
		.content{
			position: relative;
			background-color: #5e0e03;
			// height: calc(100vh - 100px);
			height:100vh;
			image.bgimage{
				width: 100%;
				height: 60vh;
				z-index: 1;
			}
			.bottomcss{
				position: absolute;
				bottom: 10rpx;
			}
			.contentbox{
				
				position: absolute;
				width: 100%;
				height: calc(100vh - 100px);
				top: 0;
				z-index: 10;
				.box{
					padding: 0 5%;
					.box_1{
						text-align: center;
						padding-top: 120rpx;
						margin-bottom: 20rpx;
						.avatar{
							display: inline-block;
							width: 160rpx;
							height: 160rpx;
							border-radius: 50%;
							border: 2px solid #d7ab5c;
							.avatar_img{	
								width: 130rpx;
								height: 130rpx;
								border-radius: 50%;
								margin-top: 10rpx;
								border: 2px solid #d7ab5c;
								background-color: #d7ab5c;
							}
						}
						.username{
							margin-top: 10rpx;
							color: #d7ab5c;
							font-size: 16px;
							font-weight: 600;
						}
					}
					.box_2{
						padding:30rpx 0;
						color: #d7ab5c;
						display: flex;
						justify-content: space-between;
						font-size: 10px;
					}
					.box_3{
						// width: 100%;
						padding: 0 6%;
						height: 60vh;
						z-index: 3;
						background:url('/static/home/uerbox.png');
						background-repeat: no-repeat;
						background-size:100% 100%;
						background-position: center;
						.cbox1{
							padding: 30rpx 5%;
							font-size: 28rpx;
							color:#b97232;
							text{
								display: inline-block;
								margin-bottom: 15rpx;
							}
						}
						.cbox2{
							border-radius: 20rpx;
							height: 280rpx;
							border: 1px solid #d7ab5c;
							box-shadow:0rpx 1rpx 5rpx  #d7ab5c;
							.ccbox1{
								padding: 20rpx;
								font-size: 10px;
								text{
									color:#d71f47;
								}
							
							}
							.ccbox2{
								position: relative;
								// display: flex;
								// flex-wrap: nowrap;
								// height: 100rpx;
								// justify-content: space-around;
								.qdbox{
									z-index: 111;
									position: relative;
									display: flex;
									flex-wrap: nowrap;
									height: 100rpx;
									justify-content: space-around;
									.imgbg{
										width: 60rpx;
										height: 60rpx;
										border-radius: 50%;
										border: 1px solid #d7ab5c;
										.in_img{
											padding: 20%;
											width: 60%;
											height: 50%;
										}
										.title_img{
											display: inline-block;
											margin-top: 15rpx;
											font-size: 10px;
										}
										// background-color: #b97232;
									}
									.noactive{
										background-color: #fff;
									}
									.activeed{
										background-color: #d7ab5c;
									}
								}
								
								.hx{
									position: absolute;
									border: 1px solid #d7ab5c;
									width: 80%;
									top: 15px;
									z-index: 110;
									left: 10%;
								}
							}
							.ccbox3{
								text-align: center;
								height: 48rpx;
								line-height: 48rpx;
								margin-top: 15rpx;
								
								text{
									display: inline-block;
									border-radius: 30rpx;
									padding: 1rpx 30rpx;
									border: 1px solid #d7ab5c;
									background-color:#d7ab5c ;
									margin-top: 16rpx;
									color: #fff;
								}
							}

						}
						.cbox3{
							margin-top: 20rpx;
							.navbox{
								height: 80rpx;
								display: flex;
								justify-content: space-between;
								color: #b97232;
								border-bottom: 1px solid #d7ab5c;
								.navboxleftbox{
									color: #b97232;
									height:80rpx;
									display: flex;
									align-items: center;
									justify-content: flex-start;
									line-height: 80rpx;
									image{
										display: inline-block;
										height: 35rpx;
										width: 35rpx; 
										margin-right: 40rpx;
									}
									.navboxleft {
										display: flex;
										align-items: center;
									}
								}
								.navboxrightbox{
										line-height: 80rpx;
								}
							}
							.navbox:last-of-type{
								border-bottom:none;
							}
						}
						.cbox3:last-child{
							border-bottom:none;
						}
					}
				}
				
			}
		
		}
		.content4{
			// height: 150rpx;
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			margin-bottom: 0rpx;
			.border_bottom{
				position: absolute;
				height: 50rpx;
				width: 100%;
				// margin-top: 0rpx;
			}
			.bottom_text{
				color:#fff;
				font-size: 24rpx;
				display: block;
				margin-top: 55rpx;
				text-align: center;
			}
		}
	}
	.popup-content {
		width: 502rpx;
		height: 528rpx;
		 
		background-image:url('/static/home/gdinfo.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		// background:url('https://buma-1307931616.cos.ap-guangzhou.myqcloud.com/xian/static/indexpage/yxcontent.png');
	}
	
	.pop-up {
		position: relative;
		border: 1rpx solid red;
	}
	
	.popup-close {
		position: absolute;
    width: 60rpx;
    height: 60rpx;
    right: 220rpx;
    bottom: -10rpx; 
	}
	 
	.popup-content { 
		padding: 30rpx 50rpx;
		box-sizing: border-box;
		view {
			box-sizing: border-box;
		}
		
	}
	
	.popup-bottom {
		margin-bottom: 40rpx;
	}
	
	.pop-title {
		text-align: center;
		font-weight: bold;
		color: #fff;
		margin-bottom: 40rpx;
	}
	
	.up-title {
		color: #ffdf20;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	.up-content {
		color: #fff;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	
	
</style>
